<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
	</head>
	<body>
		<div class="container">
			<h4>使用flex-fill</h4>
			<div class="bg-secondary p-2 d-flex">
				<!-- .p-2.bg-{Flex item-$}*3 -->
				<div class="p-2 flex-fill bg-info">Flex item-1</div>
				<div class="p-2 flex-fill bg-warning">Flex item-2</div>
				<div class="p-2 flex-fill bg-success">Flex item-3</div>
			</div>
			<div class="bg-secondary p-2 d-flex">
				<!-- .p-2.bg-{Flex item-$}*3 -->
				<div class="p-2 flex-grow-1 bg-info">Flex item-1</div>
				<div class="p-2 flex-fill bg-warning">Flex item-2</div>
				<div class="p-2 flex-fill bg-success">Flex item-3</div>
			</div>
			<div class="bg-danger p-2 d-flex">
				<!-- .p-2.bg-{Flex item-$}*3 -->
				<div class="p-2 w-100 bg-info">Flex item-1</div>
				<div class="p-2 flex-shrink-1 bg-warning">Flex item-2</div>
				<div class="p-2 flex-shrink-1 bg-success">Flex item-3</div>
			</div>
		</div>
		<div class="container">
			<h4>使用mr-auto自动边距</h4>
			<div class="bg-secondary d-flex">
				<div class="p-2 bg-danger mr-auto">Flex item-1</div>
				<div class="p-2 bg-info">Flex item-2</div>
				<div class="p-2 bg-warning mr-auto">Flex item-3</div>
			</div>
			<h4>使用order实现排序</h4>
			<div class="bg-secondary d-flex justify-content-around">
				<div class="p-2 bg-danger mr-auto order-3">Flex item-1</div>
				<div class="p-2 bg-info">Flex item-2</div>
				<div class="p-2 bg-warning mr-auto order-3">Flex item-3</div>
		</div>
	</body>
</html>
